<template>
  <view class="logisticsDeta">
    <view class="logisticsTitle">
      <view class="title" v-if="datas && datas.amount>0">{{datas.amount}}个包裹已发出</view>
      <view class="title" v-else>暂无包裹发出</view>
    </view>
    <!-- <scroll-view class="logisticsContent" scroll-y="true"  @scrolltolower="lower" :scroll-top="scrollTop" @scroll="scroll" scroll-with-animation> -->
    <scroll-view class="logisticsContent" scroll-y="true"  scroll-with-animation>
      <view class="content_list" v-if="datas.list" v-for="(item,index) in datas.list" :key='index' @click="gotoDetail(item)">
        <view class="list_title">
          <view class="title_left">
            <image :src="$store.state.imgBaseUrl + '/findStore.png'"></image>
            <text>{{item.deliverystatus}}</text>
          </view>
          <text class="title_right">{{item.expName}}:{{item.number}}</text>
        </view>
        <view class="list_content">
          <view>{{item.productName}}</view>
          <image :src="item.fileUrl"></image>
          <text>共{{item.piece}}件商品</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
// import {imgUrl} from '@/service/config/env.js'
// import {gettokenStore, getStorebyKEY} from '../../store/dataCache.js';
import { mainLogistics } from '@/service/purchaseShop/order.service.js'
export default {
  data() {
    return {
      height: 0,
      imageUrl: this.$store.state.imgBaseUrl,
      logisticsList: [
        {stauts:2, statusName:'已签收', courier:'中通快递', courierSn:'26541641964',address:'【江苏省】[南京市] 玄武区 光明大道13号签收 签收人:防盗门赛诺菲上上课分 ',src:`${this.$store.state.imgBaseUrl}/caigousahngcheng.png`, num:1},
        {stauts:2, statusName:'已签收', courier:'中通快递', courierSn:'26541641964',address:'【江苏省】[南京市] 玄武区 光明大道13号签收 签收人:防盗门赛诺菲上上课分 ',src:`${this.$store.state.imgBaseUrl}/caigousahngcheng.png`, num:1},
        {stauts:2, statusName:'已签收', courier:'中通快递', courierSn:'26541641964',address:'【江苏省】[南京市] 玄武区 光明大道13号签收 签收人:防盗门赛诺菲上上课分 ',src:`${this.$store.state.imgBaseUrl}/caigousahngcheng.png`, num:1},
        {stauts:2, statusName:'已签收', courier:'中通快递', courierSn:'26541641964',address:'【江苏省】[南京市] 玄武区 光明大道13号签收 签收人:防盗门赛诺菲上上课分 ',src:`${this.$store.state.imgBaseUrl}/caigousahngcheng.png`, num:1}
      ],
      scrollTop: 0,
      old: {
        scrollTop: 0
      },
      orderId: '',
      datas: null
    };
  },
  onLoad(option) {
    this.orderId = option.id
    // this.height = uni.getSystemInfoSync().windowHeight;
  },
  onShow:function() {
    this.getDatas()
  },
  methods:{
    getDatas () {
      let params = {
        id: this.orderId
        // id: 16857
      }
      mainLogistics(params, res => {
        if (res.status == 0) {
          this.datas = res.data
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
    gotoDetail (item) {
      uni.navigateTo({
        url: '/pages/purchaseShop/logisticsDetail?id=' + item.orderDetailId
      })
    },
    lower () {
      // if (this.pages.total > this.categoryList.length) {
      //   this.pages.current++;
      //   this.getCategorydata(this.categoryId);
      // }
    },
    // scroll: function(e) {
    //   this.old.scrollTop = e.detail.scrollTop
    // },
  }
}
</script>

<style lang="scss">
.logisticsDeta{
  display: flex;
  .logisticsTitle{
    padding: 37rpx 39rpx 37rpx 32rpx;
    background: #FFFFFF;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    .title{
      width:648rpx;
      height:67rpx;
      background:rgba(255,241,234,1);
      border-radius:34rpx;
      font-size:28rpx;
      font-family:PingFang SC;
      font-weight:500;
      color:rgba(255,84,0,1);
      line-height: 67rpx;
      padding-left: 31rpx;
    }
  }
  .logisticsContent{
    overflow: hidden;
    padding-top: 104rpx;
    height: 100%;
    background:rgba(250,250,250,1);
    .content_list{
      background: #FFFFFF;
      margin-top: 20rpx;
      padding: 30rpx 35rpx;
      .list_title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title_left{
          display: flex;
          align-items: center;
          image{
            width:42rpx;
            height:44rpx;
          }
          text{
            font-size:28rpx;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(255,110,49,1);
            margin-left: 22rpx;
          }
        }
        .title_right{
          font-size:24rpx;
          font-family:PingFang SC;
          font-weight:500;
          color:rgba(102,102,102,1);
        }
      }
      .list_content{
        display: flex;
        flex-direction: column;
        margin-top: 30rpx;
        view{
          font-size:26rpx;
          font-family:PingFang SC;
          font-weight:500;
          color:rgba(102,102,102,1);
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
        }
        image{
          margin-top: 28rpx;
          width:147rpx;
          height:147rpx;
        }
        text{
          margin-top: 18rpx;
          margin-left: 8rpx;
          font-size:26rpx;
          font-family:PingFang SC;
          font-weight:500;
          color:rgba(153,153,153,1);
        }
      }
    }
  }
}
</style>
